import Vue from "vue";
import Logging from "./Logging.vue";
import {
  registAxios,

} from 'network/Profile.js';
import {
  UPDATE_USER
} from '../../../store/mutation-type';
import {
  store
} from '../../../store/index'

// 1.创建组件构造器
const LoggingConstructor = Vue.extend(Logging);

function showLogging() {
  // 2.new的方式 创建出一个新的组件对象
  const loggingDom = new LoggingConstructor({
    // 3.将组件对象 挂载到div元素上
    el: document.createElement('div'),
    data() {
      // 用来控制登录成功后组件消失的
      return {
        isShow: true
      }
    },
    methods: {
      logging() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        // console.log(typeof username,password);

         // 对着两个进行判空 非空才提交
         if (!(username || password)) {
          this.$toast2('不能为空', 2000)
          return 0
        }

        registAxios({
          url: '/LoggingServlet',
          params: {
            username: username,
            password: password
          },
          methods: "post"
        }).then(res => {
          // res.data服务器返回的boolean值
          // console.log(res.data);
          if (res.data == true) {
            this.$toast2('登录成功', 2000)
            // 让logintoast消失
            this.isShow = false;
            // 把username传到vuex 讲道理应该传后端传来的username 但是后端没做
            store.commit(UPDATE_USER, username)
          }
          if (res.data == false)
            this.$toast2('用户名密码错误', 2000)

        }).catch(err => {
          // 拿不到vuex 但是拿得到toast2?牛逼
          this.$toast2('链接超时' + err, 2000)
        })
      },
    },
  })
  // toast.$el对应的就是div
  document.body.appendChild(loggingDom.$el)
}

function registyLoggingToast() {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$toast() 
  // 然后再main.js里面用一下插件
  Vue.prototype.$login = showLogging
}

export default registyLoggingToast;
